<template>
    <el-dialog class="dialog" title="绑定货品" center="center" :visible.sync="show" :before-close="cancelBind">
      <div>
        <el-button icon="el-icon-plus" type="success" plain size="medium" circle
                   @click="addRelation">
        </el-button>
  
      </div>
      <!-- 列表 -->
      <el-table ref="tableList" :data="dataList" :fit="true" highlight-current-row max-height="600"
                 empty-text="对不起，没有找到相关数据！">
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button icon="el-icon-minus" type="danger" plain size="medium" circle
                       @click="subRelation(scope.$index)">
            </el-button>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
        <el-table-column prop="relationName" align="center" width="180" label="归类名称">
          <template slot-scope="scope">
            <div>
              <el-input clearable v-model="scope.row.relationName"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="serverCodes" align="center" width="400" label="关联货品编号">
          <template slot-scope="scope">
            <div>
              <el-input clearable v-model="scope.row.serverCodes"></el-input>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序(正序)" align="center" width="100">
          <template slot-scope="scope">
            <div>
              <el-input clearable v-model="scope.row.sort"
                        @input="handleSortInput(scope.row, scope.$index)"></el-input>
            </div>
          </template>
        </el-table-column>
  
      </el-table>
  
      <div slot="footer">
        <el-button plain type="primary" @click="sureClick">保 存</el-button>
        <el-button plain @click="cancelBind">取 消</el-button>
      </div>
  
    </el-dialog>
  </template>
  <script>
    import BusinessServerApi from "@/api/goods/businessServer"
  
    export default {
      props: {
        show: {
          type: Boolean,
          default: false,
        },
        id: {
          type: Number | String
        },
      },
      watch: {
        show(val) {
          if (val) {
            this.listData()
          }
        },
      },
      data() {
        return {
          dataList: [],
        }
      },
      components: {},
      methods: {
  
        handleSortInput(row, index) {
          let reg = /^[1-9][0-9]{0,2}$/
          if (row.sort && !reg.test(row.sort)) {
            row.sort = "1"
            this.$message.error("排序只能输入为1-999")
          }
        },
        cancelBind() {
          this.$emit("cancel")
        },
        addRelation() {
          this.dataList.push({
            relationName:'',
            serverCodes:'',
            sort:'',
          })
        },
        subRelation(index) {
          if (this.dataList) {
            this.dataList.splice(index, 1)
          }
        },
        listData() {
          // 获取列表数据
          let cond = {
            serverId: this.id,
          }
          BusinessServerApi.listByServer(cond)
            .then(res => {
              this.dataList = res.data
              setTimeout(() => {
                this.$refs.tableList.doLayout()
              })
            }).catch(err => {
          })
        },
        sureClick() {
          // 去掉空数据(relationName,serverCodes) + serverCodes中文逗号改成英文
          let list = this.dataList
          if (list.length > 0){
            list.forEach(item=>{
              let reg = /\s+/g
              let reg2 = /，/g
              item.relationName = item.relationName.replace(reg,"")
              item.serverCodes = item.serverCodes.replace(reg,"").replace(reg2,",")
            })
            list = list.filter(item=>{
              return item.relationName&&item.serverCodes
            })
          }
          let param = {
            relationList: list,
            serverId: this.id,
          }
          BusinessServerApi.bandRelation(param).then(res => {
            this.$Utils.notifySuccess()
            this.cancelBind()
          })
        },
  
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .dialog {
      &::v-deep .el-dialog {
        width: max-content;
      }
  
      .el-radio-group {
        margin-left: 10px;
  
        .el-radio {
          margin-right: 20px;
        }
      }
  
      .img-wrapper {
        width: 80px;
        height: 60px;
        overflow: hidden;
        border-radius: 3px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin: 0 auto;
  
        .el-image {
          width: 100%;
  
          &::v-deep img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
  </style>
  
  